<!--  -->
<template>
    <div
        class="list-container"
        ref="container">
        <van-sticky>
            <div class="alllisthead">
                <div class="list-header">
                    <div
                        class="repairrelaterow">
                        <div
                            class="radiocheckbtn"
                            v-for="(item, index) in radiorelateList"
                            :key="index">
                            <div :class="item.ischeck === true ? 'checkbtn' : 'checknormalbtn'">
                                <el-button
                                    type="text"
                                    class="repair-relate-button"
                                    :class="item.ischeck === true ? 'relatechecked' : 'relatenormalchecked'"
                                    @click="onClickRelatedToMe(index, item, radiorelateList)"
                                    round
                                ><span class="nameclass">{{ item.name }}</span></el-button>
                                <div :class="item.ischeck === true ? 'relatecheckedline' : 'relatenormalcheckedline'" ></div>
                            </div>
                        </div>
                    </div>
                    <div class="list-header-filter">
                        <filter-selector
                            v-if="isRepairtype"
                            ref="filterselctor"
                            v-model:active="filterActived"
                            @resetclick="reset"
                            activedColor="#61cfbe"
                            color="rgba(255,255,255,0.8)"
                            :filterData="filterData"
                            :title="$route.meta.title"
                            @submit="onFilter"
                        />
                        <maintaincheck-filter-selector
                            v-else
                            ref="checkfilterselctor"
                            v-model:active="filterActived"
                            @resetclick="reset"
                            activedColor="#61cfbe"
                            color="rgba(255,255,255,0.8)"
                            :filterData="checkfiterData"
                            :title="$route.meta.title"
                            @submit="oncheckFilter"></maintaincheck-filter-selector>
                    </div>

                </div>
                <div class="date-list-header">
                    <div class="date-list-headerleft">
                        <div
                            class="repairrow">
                            <div
                                class="repairrowbtn"
                                v-for="(item, index) in radioButtonList"
                                :key="index">
                                <van-button
                                    class="repair-date-button"
                                    :class="item.ischeck === true ? 'repairchecked' : 'repairnomal'"
                                    @click="radiobuttonclick(index, item, radioButtonList)"
                                    round
                                >
                                    {{ item.name }}
                                </van-button>
                            </div>
                        </div>
                        <van-dropdown-menu>
                            <van-dropdown-item
                                v-model="selectDate"
                                @click="changedatasel"
                                :options="repairdateseldata"/>
                        </van-dropdown-menu>
                    </div>
                    <!-- active-color="#1890FF" -->
                    <van-dropdown-menu>
                        <van-dropdown-item
                            v-if="isRepairtype"
                            v-model="selectStatus"
                            @click="changeSelectStatus"
                            :options="repairstatus"/>
                        <van-dropdown-item
                            v-else
                            v-model="maintiancheckselStatus"
                            @click="changeMaintiancheckselStatus"
                            :options="maintaincheckstatus"/>
                    </van-dropdown-menu>
                </div>
            </div>
        </van-sticky>
        <div class="list-content-staff">
            <maintenance-order-list
                v-if="isRepairtype"
                :fnGetData="getRepairDataForStaff"
                :filter="filter"
                :memberInfo="memberInfo"
            >
            </maintenance-order-list>
            <maintaincheck-order-list
                v-else
                :fnGetData="queryMaintianexamList"
                :filter="checkfilter"
                :memberInfo="memberInfo">

            </maintaincheck-order-list>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { reactive, toRefs, onMounted, computed, ref } from 'vue';
import FilterSelector from '@/components/_common/FilterSelector.vue';
import MaintaincheckFilterSelector from '@/components/_common/MaintaincheckFilterSelector.vue';
import { getRepairDataSetup } from '@/setup/repair/RepairOrderDataSetup';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import MaintenanceOrderList from '@/components/maintenance_control/MaintenanceOrder/MaintenanceOrderList.vue';
import MaintaincheckOrderList from '@/components/maintenance_control/maintaincheckorder/MaintaincheckOrderList.vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
import useMaintaincheckDataSetup from '@/setup/maintaincheckorder/MaintaincheckorderDataSetup';
import Cookies from 'js-cookie';
import { useRoute } from 'vue-router';
// import { selfI18n } from '@/i18n';
export default {
    name: '',
    components: {
    // MaintenanceOrderCard
        MaintenanceOrderList,
        FilterSelector,
        MaintaincheckOrderList,
        MaintaincheckFilterSelector
    },
    setup () {
        const route = useRoute();
        // const $st = selfI18n;
        const { getRepairDataForStaff } = getRepairDataSetup();
        const { queryMaintianexamList } = useMaintaincheckDataSetup();
        const { repairstatus, repairdateseldata, maintaincheckstatus } = getRepairStatusData();
        const { getOneMemberInfo } = useMaintenanceMembersSetup();
        const filterselctor = ref(null);
        const checkfilterselctor = ref(null);
        const radioButtonList = reactive([
            { val: 1, ischeck: true, name: '全部' },
            { val: 2, ischeck: false, name: '我的' }
        ]);
        const radiorelateList = reactive([
            { val: 1, ischeck: true, name: '报修工单' },
            { val: 2, ischeck: false, name: '维检工单' }
        ]);
        const state = reactive({
            pagetype: route.params.type || 'repairlist',
            showPopover: false,
            // 报修工单状态选择
            selectStatus: repairstatus[4].value,
            // 维检工单状态选择
            maintiancheckselStatus: maintaincheckstatus[3].value,
            // 快捷日期选择
            selectDate: repairdateseldata[0].value,
            // 是否是报修工单
            isRepairtype: false,
            isRelateToMe: false,
            memberInfo: {},
            filterActived: false,
            timestart: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
            timeend: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
            // 报修工单数据过滤
            baseFilterData: {
                status: 'all',
                // 时间范围
                repairtimeend: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                repairtimestart: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                // 责任人
                administrator: '',
                // company: '',
                // content: '',
                // manufacturecode: '',
                // name: '',
                // phone: '',
                // repairid: '',
                username: Cookies.get('username')
            },
            customFilterData: {},
            filterData: {
                status: 'all',
                // 时间范围
                repairtimeend: '',
                repairtimestart: '',
                // 责任人
                administrator: '',
                company: '',
                content: '',
                manufacturecode: '',
                name: '',
                phone: '',
                repairid: '',
                username: Cookies.get('username')
            },
            // 维检数据
            basecheckFilterData: {
                // maintainworkorderid: '',
                status: '',
                administrator: '',
                n: 20,
                p: 1,
                sendordertimestart: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                sendordertimeend: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                // maintaintimestart: '',
                // maintaintimeend: '',
                // address: '',
                // customer_name: '',
                // contactperson: '',
                // contactway: '',
                username: Cookies.get('username')
            },
            customcheckFilterData: {},
            checkfiterData: {
                maintainworkorderid: '',
                status: '',
                administrator: '',
                n: 20,
                p: 1,
                sendordertimestart: '',
                sendordertimeend: '',
                maintaintimestart: '',
                maintaintimeend: '',
                address: '',
                customer_name: '',
                contactperson: '',
                contactway: '',
                username: Cookies.get('username')
            },
            isFastClick: true
        });
        // 把筛选数据替换首页条件判断
        const onFilter = (data) => {
            // state.timestart = data.repairtimestart;
            // state.timeend = data.repairtimeend;
            // state.isRepairtype = false;
            // state.selectStatus = repairstatus[4].value;
            state.customFilterData = data;
            state.customFilterData.administratorfuzzysearch = true;
            state.isFastClick = false;
            clearFilterFastData();
            changefilter();
        };
        const oncheckFilter = (data) => {
            // state.timestart = data.sendordertimestart;
            // state.timeend = data.sendordertimeend;
            state.customcheckFilterData = data;
            state.customcheckFilterData.administratorfuzzysearch = true;
            state.isFastClick = false;
            clearFilterFastData();
            changefilter();
        };
        // 选择是维修工单还是维检工单
        const onClickRelatedToMe = (index, item, list) => {
            // state.isRepairtype = !state.isRepairtype;
            console.log(list);
            clearFilterBoxData();
            if (list !== undefined) {
                for (var i = 0; i < list.length; i++) {
                    list[i].ischeck = false;
                }
                item.ischeck = true;
                switch (index) {
                case 0:
                    state.isRepairtype = true;
                    state.pagetype = 'repairlist';
                    changefilter();
                    break;
                case 1:
                    state.isRepairtype = false;
                    state.pagetype = 'maintaincecheckorder';
                    changefilter();
                    break;
                };
            } else {
                state.isRepairtype = true;
            }
        };
        // 选择是全部还是我的
        const buttonChecked = (index, item, list) => {
            // console.log(list);
            if (list !== undefined) {
                for (var i = 0; i < list.length; i++) {
                    list[i].ischeck = false;
                }
                item.ischeck = true;
                switch (index) {
                case 0:
                    state.isRelateToMe = false;
                    changefilter();
                    break;
                case 1:
                    state.isRelateToMe = true;
                    changefilter();
                    break;
                }
            }
        };
        const radiobuttonclick = (index, item, list) => {
            clearFilterBoxData();
            buttonChecked(index, item, list);
        };
        // 报修工单过滤数据
        const filter = computed(() => {
            return state.filterData;
        });
        const checkfilter = computed(() => {
            return state.checkfiterData;
        });
        const changerepairfiter = () => {
            state.baseFilterData.repairtimestart = state.timestart;
            state.baseFilterData.repairtimeend = state.timeend;
            /* state.customFilterData.repairtimestart = state.timestart;
            state.customFilterData.repairtimeend = state.timeend; */
            let filerdata = {};
            // filerdata.repairtimestart = state.timestart;
            // filerdata.repairtimeend = state.timeend;
            if (state.isRelateToMe) {
                state.baseFilterData.administrator = Cookies.get('username');
            } else {
                state.baseFilterData.administrator = '';
            }
            if (state.isFastClick) {
                filerdata = {
                    ...state.baseFilterData
                };
            } else {
                filerdata = {
                    ...state.customFilterData
                };
            }

            state.filterData = filerdata;
        };
        const changecheckfiter = () => {
            // basecheckFilterData,customcheckFilterData,checkfiterData
            state.basecheckFilterData.sendordertimestart = state.timestart;
            state.basecheckFilterData.sendordertimeend = state.timeend;
            /* state.customcheckFilterData.sendordertimestart = state.timestart;
            state.customcheckFilterData.sendordertimeend = state.timeend; */
            let filerdata = {};
            // filerdata.sendordertimestart = state.timestart;
            // filerdata.sendordertimeend = state.timeend;
            if (state.isRelateToMe) {
                state.basecheckFilterData.administrator = Cookies.get('username');
            } else {
                state.basecheckFilterData.administrator = '';
            }
            if (state.isFastClick) {
                filerdata = {
                    ...state.basecheckFilterData
                };
            } else {
                filerdata = {
                    ...state.customcheckFilterData
                };
            }

            state.checkfiterData = filerdata;
        };
        const changefilter = () => {
            if (state.isRepairtype) {
                changerepairfiter();
            } else {
                changecheckfiter();
            }
        };
        const changedatasel = () => {
            clearFilterBoxData();
            switch (state.selectDate) {
            case '1':
                state.timestart = moment()
                    .startOf('day')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changefilter();
                break;
            case '2':
                state.timestart = moment()
                    .startOf('day')
                    .subtract(6, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changefilter();
                break;
            case '3':
                state.timestart = moment()
                    .startOf('day')
                    .subtract(29, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changefilter();
                break;
            case 'custom':
                state.timestart = '';
                state.timeend = '';
                changefilter();
                break;
            }
        };

        // 清空维检工单、报修工单筛选框数据
        const clearFilterBoxData = () => {
            if (state.isFastClick) return;
            state.filterData = {
                status: 'all',
                // 时间范围
                repairtimeend: '',
                repairtimestart: '',
                // 责任人
                administrator: '',
                company: '',
                content: '',
                manufacturecode: '',
                name: '',
                phone: '',
                repairid: '',
                username: Cookies.get('username')
            };
            state.checkfiterData = {
                maintainworkorderid: '',
                status: '',
                administrator: '',
                n: 20,
                p: 1,
                sendordertimestart: '',
                sendordertimeend: '',
                maintaintimestart: '',
                maintaintimeend: '',
                address: '',
                customer_name: '',
                contactperson: '',
                contactway: '',
                wxappflag: true,
                username: Cookies.get('username')
            };
            if (filterselctor.value) {
                filterselctor.value.onReset();
            }
            if (checkfilterselctor.value) {
                checkfilterselctor.value.onReset();
            }
            state.selectDate = '1';
            state.timestart = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
            state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
            state.isFastClick = true;
        };

        // 清空维检工单、报修工单快捷筛选数据
        const clearFilterFastData = () => {
            radioButtonList[0].ischeck = true;
            radioButtonList[1].ischeck = false;
            state.selectDate = 'custom';
            state.isRelateToMe = false;
            state.selectStatus = 'all';
            state.baseFilterData.status = 'all';
            state.maintiancheckselStatus = '';
            state.basecheckFilterData.status = '';
        };

        /* watch(
            () => state.selectDate,
            (newVal, oldVal) => {
                clearFilterBoxData();
                switch (newVal) {
                case '1':
                    state.timestart = moment()
                        .startOf('day')
                        .format('YYYY-MM-DD HH:mm:ss');
                    state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                    changefilter();
                    break;
                case '2':
                    state.timestart = moment()
                        .startOf('day')
                        .subtract(6, 'days')
                        .format('YYYY-MM-DD HH:mm:ss');
                    state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                    changefilter();
                    break;
                case '3':
                    state.timestart = moment()
                        .startOf('day')
                        .subtract(29, 'days')
                        .format('YYYY-MM-DD HH:mm:ss');
                    state.timeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                    changefilter();
                    break;
                }
            }
        ); */
        const changeSelectStatus = () => {
            clearFilterBoxData();
            state.filterActived = false;
            state.customFilterData = {};
            state.baseFilterData.status = state.selectStatus;
            changefilter();
        };

        const changeMaintiancheckselStatus = () => {
            clearFilterBoxData();
            state.filterActived = false;
            state.customcheckFilterData = {};
            state.basecheckFilterData.status = state.maintiancheckselStatus;
            changefilter();
        };

        onMounted(async () => {
            const member = await getOneMemberInfo(Cookies.get('username'));
            state.memberInfo = member.value;
            // state.filterData = {
            //     ...state.baseFilterData
            // };
            if (state.pagetype === 'repairlist') {
                onClickRelatedToMe(0, radiorelateList[0], radiorelateList);
            } else {
                onClickRelatedToMe(1, radiorelateList[1], radiorelateList);
            }
            // onClickRelatedToMe();
            changefilter();
        });

        return {
            filter,
            onFilter,
            onClickRelatedToMe,
            repairstatus,
            repairdateseldata,
            getRepairDataForStaff,
            ...toRefs(state),
            radioButtonList,
            buttonChecked,
            radiorelateList,
            filterselctor,
            radiobuttonclick,
            maintaincheckstatus,
            changefilter,
            changerepairfiter,
            changecheckfiter,
            checkfilter,
            queryMaintianexamList,
            oncheckFilter,
            changedatasel,
            clearFilterBoxData,
            clearFilterFastData,
            checkfilterselctor,
            changeSelectStatus,
            changeMaintiancheckselStatus
        };
    }
};
</script>
<style lang='scss'>
.list-container {
    // height: calc(100% - 182px);
  overflow: hidden;
  background-attachment: fixed;
  background: linear-gradient(
    180deg,
    #3875c6,
    rgba(56, 117, 198, 0) 70%,
    rgba(56, 117, 198, 0) 100%
  );
    .van-dropdown-menu__bar{
        height: 23px;
        width: 90px;
        background-color: transparent;
        color: rgba($color: #ffffff, $alpha: 1.0);
        border-style:solid;
        border-width:1px;
        border-color: rgba($color: #ffffff, $alpha: 0.2);
        border-radius: 999px;

        font-size: 13px;
        font-weight: Normal;
        text-align: LEFT;
        line-height: 23px;
        // margin-bottom: 15px;
    }
    .van-dropdown-menu__title{
        margin-left: -15px;
        font-size: 13px;
        color:rgba($color: #ffffff, $alpha: 0.8);
    }
    .van-dropdown-menu__title--active{
        color: #ffffff;
    }
    .van-dropdown-item.van-dropdown-item--down{
        margin-top:15px
    }
    .van-dropdown-item__content{
        // margin-top: 15px;
    }
    .van-dropdown-item__option--active {
    color: #1890FF;
    }
    .van-dropdown-item__option--active .van-dropdown-item__icon{
        color: #1890FF;
    }
}
.alllisthead{
    // height: 106px;
    // margin-bottom:15px;
    // padding-bottom: 15px;
    // background: linear-gradient(#3875c6,#5d8cca);
}
.list-header {
    width:calc(100% - 30px);
  padding: 10px 15px 0px;
    display: flex;
    justify-content: space-between;
//   justify-content:flex-start;
  align-items: flex-start;
// padding: 15px 10px 5px;
//   z-index: 9;
}
.list-header-btn {
    float: left;
  min-width: 90px;
  background-color: transparent;
  color: rgba($color: #ffffff, $alpha: 0.8);
  border-color: rgba($color: #ffffff, $alpha: 0.8);
  font-size: 13px;
  margin-left: 15px;
}
.list-header-filter {
    height: 25px;
    line-height:25px;
    // margin-top: 90px;
    // position: absolute;
    //color: rgba($color: #ffffff, $alpha: 0.8);
    // margin-left: 15px;
    // right:15px
    .van-overlay{
    top: 55px;
}
.van-popup.van-popup--round{
    margin-top: 55px;
}
}
.list-content-staff {
    // margin-top: 10px;
    z-index: -1;
    height: calc(100vh - 157px);
    overflow: scroll;
}
.selected {
  background-color: #61cfbe;
  border: 1px solid #61cfbe;
}
.date-list-header{
    margin-top:10px;
    width:calc(100% - 30px);
    // margin-bottom: 15px;
    padding: 10px 15px 8px;
    // padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date-list-headerleft{
        width: 60%;
    display: flex;
    justify-content: flex-start;

    }

}
.repairrow {
    display: flex;
    flex-wrap: nowrap;
.repairrowbtn{
    margin-right: 8px;
}
}
.repairchecked {
  color: #ffffff;
  border-color: #61cfbe;
  opacity: 1;
 background: #61cfbe;
}
.repairnomal{
     color: #ffffff;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 13px;
background: rgba(255,255,255,0);

}
.repair-date-button {
  width: 100%;
  height: 25px;
  white-space: nowrap;
}
.repairrelaterow {
    display: flex;
    flex-wrap: nowrap;
}
.radiocheckbtn{

}
.radiocheckbtn:nth-child(2){
    margin-left: 15px;
}
.checkbtn{
    width:72px;
    // margin-left: 15px;
    // width: 72px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    align-content: center;
}
.checknormalbtn{
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    align-content: center;
}
// .checkbtn:last-child{
//     margin-left: 15px;
// }
.relatechecked {
    width:72px;
    height: 25px;
    line-height: 25px;
    color: #ffffff;
font-size:18px;
  white-space: nowrap;
}
.relatecheckedline{
    width: 72px;
    height: 3px;
    background-color: #61cfbe;
    border-radius: 2px;
    // margin-top:10px;

}
.relatenormalcheckedline{
    //  width: 100%;
    height: 3px;
    background-color:rgba(0,0,0,0);
    border-radius: 2px;

}
.relatenormalchecked{
    height: 25px;
    line-height: 25px;
     color: #ffffff;
font-size:15px;
  white-space: nowrap;
}
.repair-relate-button {
//   width:72px;
color: #ffffff;
  white-space: nowrap;
  .nameclass{
      height: 25px;
      line-height: 25px;
  }
}
</style>
